<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            padding: 12px;
        }
    </style>
</head>
<body>
    <div id="root">
        <form @submit.prevent="showme">
            <!-- .trim修饰符是去掉空白 -->
            <div><label for="name">账号：</label> <input v-model.trim="user.account" id="name" type="text"></div>
            <div><label for="pass">密码：</label> <input v-model="user.password" id="pass" type="password"></div>
            <!-- type="number"是控制输入是数字框 -->
            <!-- .number修饰符是vue自动把字符串转化成数字 -->
            <div><label for="age">年龄：</label> <input v-model.number="user.age" id="age" type="number"></div>
            <div><label for="sex">性别：</label> 
                <input v-model="user.sex" value='male' id="sex" type="radio"  name="sex">男
                <input v-model="user.sex" value="female" type="radio" name="sex">女</div>
            <div><label for="hobby">爱好：</label> 
                <input v-model="user.hobby" value='smoke'  type="checkbox"  id="hobby">抽烟
                <input v-model="user.hobby" value='drink'  type="checkbox" >喝酒
            </div>
            <div><label for="school">学校：</label>
                <select v-model="user.school" type="checkbox" id="school">
                    <option>please select</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>
            <!-- .lazy修饰符是失去焦点的时候会收集 -->
            <div><label for="other">其他：</label> <textarea v-model.lazy="user.other" id="other"></textarea></div>
            <div><input id="license"  v-model="user.license" type="checkbox"><label for="license">同意<a href=''>注册协议</a></label> </div>
            <div><button>提交</button></div>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                user:{
                    account:'',
                    password:'',
                    age:'',
                    sex:'',
                    hobby:[],
                    school:'',
                    other:'',
                    license:'',
                }
            },
            computed:{
            },
            methods:{
                showme(){
                    console.log(JSON.stringify(this.user))
                }
            },
            watch:{
            },
        })
    </script>    
</body>
</html>